<template>
  <view class="withdraw">
    <view class="navbar">
      <uni-nav-bar @clickLeft="goback" leftIcon="left" fixed="true" border="false" color="#FFF" statusBar="true"
        backgroundColor="#22b9a3" title="提现" />
    </view>
    <view class="box-down">
      <view class="money">提现金额</view>
      <view class="money-center">
        <text class="box-right">￥</text>
        <input placeholder="请输入提现金额" class="ser" v-model="drawMoney" type="digit" @blur="validateMoney" />
      </view>
      <view class="empty"></view>
      <view class="money-down">
        <text style="color: #9d9d9d;">
          {{
 						`当前余额：￥${(staffInfo.balance/100).toFixed(2)}`
 				}}
        </text>
      </view>
    </view>

    <view class="tips">{{ showTips ? '输入金额超过可用余额' : '' }}</view>
    <view class="end" @tap="confirm">申请提现</view>
    <view class="tips-x u-flex u-col-top">
      <text class="tips-color">温馨提示：</text><text>提现后，将于每周六打款</text>
    </view>
  </view>
</template>

<script setup>
  import * as http from '@/utils/http'
  import {
    showToastAndDo
  } from '@/utils/toast.js'
  import {
    ref
  } from 'vue';
  import {
    onLoad
  } from '@dcloudio/uni-app'
  const staffInfo = ref({})
  const drawMoney = ref(null)
  const showTips = ref(false)
  let param = ref({
    staffId: null,
    staffName: null,
    money: null,
    status: 0
  })
  onLoad(() => {
    staffInfo.value = uni.getStorageSync("staffInfo");
  })
  //导航返回
  function goback() {
    uni.navigateBack()
  }

  function confirm() {
    if (staffInfo.balance == '0') {
      uni.showToast({
        title: '金额不足，不能提现',
        icon: 'none',
        duration: 1000
      })
      return;
    }
    param.staffId = staffInfo.value.id
    param.staffName = staffInfo.value.name
    param.money = drawMoney.value * 100
    withdraw()
  }
  //提现
  async function withdraw() {
    if (!param.money) {
      uni.showToast({
        title: '请输入提现金额',
        icon: 'none',
        duration: 1000
      })
      return;
    }
    if (param.money < 1) {
      uni.showToast({
        title: '低于0.01元无法提现',
        icon: 'none',
        duration: 1000
      })
      return;
    }

    if (param.money > staffInfo.value.balance) {
      uni.showToast({
        title: '超出可提现金额',
        icon: 'none',
        duration: 1000
      })
      return;
    }
    const result = await http.postRequest("/peizhen/withdraw/create", param)
    if (result.code == 0) {
      showToastAndDo('你的提现申请已提交审核，请耐心等待', 'none', 2000, () => {
        uni.navigateBack()
      })
    } else if (result.code == 1120000002) {
      showToastAndDo(result.msg, 'none', 2000, () => {
        uni.navigateBack()
      })
    }
  };

  function validateMoney() {
    showTips.value = drawMoney.value * 100 > staffInfo.value.balance
  }
</script>

<style lang="scss" scoped>
  .navbar ::v-deep .uni-nav-bar-text {
    font-size: $uni-font-size-title !important;
    font-family: "siyuan";
  }

  .withdraw {
    min-height: 100vh;
    background-color: #f6f7fb;
  }

  .box-down {
    width: 690rpx;
    height: 310rpx;
    background: #ffffff;
    box-shadow: 0rpx 2rpx 18rpx 0rpx rgba(0, 0, 0, 0.06);
    border-radius: 20rpx;
    margin: 30rpx auto;

    .money {
      width: 100%;
      height: 105rpx;
      line-height: 105rpx;
      margin-left: 34rpx;
    }

    .money-center {
      display: flex;
      align-items: center;

      .box-right {
        font-size: 48rpx;
        margin-left: 52rpx;
      }

      .empty-harp {
        width: 1rpx;
        height: 70rpx;
        background-color: #e8e8e8;
        margin-left: 18rpx;
      }

      input {
        font-size: 40rpx;
        margin-left: 30rpx;
      }
    }

    .empty {
      width: 630rpx;
      height: 1rpx;
      background: #f0f0f0;
      margin: 40rpx auto 0 auto;
    }

    .money-down {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 96rpx;
      font-size: 28rpx;
      padding: 0 30rpx;
    }

    .total {
      color: #ff5c5c;
      font-weight: bold;
    }
  }

  .tips {
    margin: 0 30rpx;
    color: #ff5c5c;
    font-weight: bold;
    margin-bottom: 20rpx;
    // height: 50rpx;
  }

  .tips-x {
    margin: 30rpx 30rpx;
    color: #808080;
    font-size: 24rpx;

    // height: 50rpx;
    .tips-color {
      color: #ff5c5c;
      width: 180rpx;

    }
  }

  .bing-ali {
    margin: 0rpx auto;
    color: #55b5ff;
    width: 300rpx;
    text-align: center;
  }

  .end {
    bottom: 40%;
    left: 0;
    right: 0;
    width: 690rpx;
    height: 96rpx;
    background: #2dbca3;
    border-radius: 48rpx;
    line-height: 96rpx;
    text-align: center;
    margin: 0 auto;
    color: #ebebeb;
    font-size: 36rpx;
  }
</style>